<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-header style="width: 1200px;margin: 0 auto ;background-color: #0aa1ed;color: #FFFFFF">
        <p style="float:left;font-size: 18px ">CollShark商城后台管理系统</p>
        <p style="float:right;color: #FFFFFF">欢迎XXX回来 <a href="">退出登录</a></p>
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto">
                <el-row>
                    <el-col span="4">
                        <el-menu style="width: 200px;" default-active="1">
                            <el-submenu index="1">
                                <template slot="title">商品管理</template>
                                <el-menu-item index="1-1">商品列表</el-menu-item>
                                <el-menu-item index="1-2">添加商品</el-menu-item>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title">商品管理</template>
                                <el-menu-item index="2-1">商品列表</el-menu-item>
                                <el-menu-item index="2-2">添加商品</el-menu-item>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title">商品管理</template>
                                <el-menu-item index="3-1">商品列表</el-menu-item>
                                <el-menu-item index="3-2">添加商品</el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-col>
                    <el-col span="20">
                        <el-table :data="emp" style="width: 1000px;float:right;">
                        <el-table-column type="index" label="编号"></el-table-column>
                        <el-table-column prop="name" label="分类名称" width="700"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    </el-col>
                </el-row>


    </el-main>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                emp: [{name:"精彩活动"},
                    , {name:"精品女装"},
                    {name:"时尚男装"},
                    {name:"医疗健康"},
                    ,{name:"数码科技"}],
                arr:[]
            }
        },
        methods: {
            handleDelete(i,emp){
                if (confirm("您确定删除吗"+emp.name+"吗?")){
                    v.arr.splice(i,1);
                    v.$message.success("删除成功!");
                }
            }

        }
    })
</script>
</html>